<template>
  <div
    class="card"
    :style="{ height: height, width: width + 'px', marginTop: top + 'px' }"
  >
    <div class="flexBet tipTitle flexColCenter" v-if="title">
      <div class="txt rela overTxt" :style="{width:titleWidth+'px'}">
        {{ title }} <span class="sign">{{ signText }}</span>
        <div class="redtip" v-if="backlogNum > 0">{{ backlogNum }}</div>
      </div>
      <slot name="title"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    titleWidth: {
      type: [Number,String],
      default: 228,
    },
    title: String,
    signText: String,
    top: {
      type: Number,
      default: 18,
    },
    backlogNum: {
      type: Number,
      default: 0,
    },
    width: {
      type: Number,
      default: 1200,
    },
    height: {
      type: String,
      default: "calc(100vh - 68px - 18px - 30px)",
    },
  },
  data() {
    return {};
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped lang='scss'>
.card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;

  .tipTitle {
    height: 72px;
    box-sizing: border-box;
    border-bottom: 1px solid #edeff0;
    padding:0 24px;
    .txt {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 72px;

      .redtip {
        border-radius: 50%;
        position: absolute;
        right: -14px;
        top: -7px;
        width: 15px;
        height: 15px;
        font-size: 6px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #ffffff;
        line-height: 15px;
        text-align: center;
        background: #ff3b30;
      }
      .sign{
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #EF7D00;
        margin-left: 20px;
      }
    }
  }
}
</style>
